<template>
	<view>
		<view class="search-page">
		    <!-- 搜索栏区域 -->
		    <view class="search-bar">
		      <image class="search-icon" src="/static/img/搜索.png"></image> 
		      <input class="search-input" type="text" placeholder="口红" />
		      <text class="cancel-btn" @click="toIndex">取消</text>
		    </view>
		    <!-- 热门搜索区域 -->
		    <view class="hot-search">
		      <text class="hot-title">热门搜索</text>
		      <view class="hot-list">
		        <text class="hot-item" v-for="(item, index) in hotSearchList" :key="index">{{item}}</text>
		      </view>
		    </view>
		    <!-- 清空搜索历史按钮 -->
		    <view class="clear-history">
		      <text>清空搜索历史</text>
		    </view>
		  </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotSearchList: ['口红', '薯条', '平板电脑', 'AABB', '手机']
			}//return
		},//data
		methods: {
			toIndex(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}
	}//export default
</script>

<style>
.search-page {
  padding: 10px;
  background-color: #fff;
}
/* 搜索栏样式 */
.search-bar {
  display: flex;
  align-items: center;
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 5px 10px;
}
.search-icon {
  width: 20px;
  height: 20px;
}
.search-input {
  flex: 1;
  margin: 0 10px;
}
.cancel-btn {
  color: #007aff;
}
/* 热门搜索样式 */
.hot-search {
  margin-top: 20px;
}
.hot-title {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: 10px;
}
.hot-list {
  display: flex;
  flex-wrap: wrap;
}
.hot-item {
  background-color: #f5f5f5;
  padding: 5px 10px;
  border-radius: 5px;
  margin-right: 10px;
  margin-bottom: 10px;
}
/* 清空搜索历史样式 */
.clear-history {
  text-align: center;
  margin-top: 20px;
  color: #999;
}
</style>
